import type { GoogleElements } from '../../../../../../../../types/constants/personalization/google'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { PageHandler } from '../../../../../../../../lib/page_handler'
import {
  GOOGLE_SEARCH_PAGE_SELECTORS,
  GooglePageType,
} from '../../../../../../../../lib/page_handler/platform/google/types'
import {
  AppStyleCollections,
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class GoogleCommonPage {
  elements: GoogleElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GOOGLE]
  private static instance: GoogleCommonPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()
  private readonly pageType = PageHandler.getCurrentPageType()

  /**
   * 获取单例实例
   */
  public static getInstance(): GoogleCommonPage {
    if (!GoogleCommonPage.instance) {
      GoogleCommonPage.instance = new GoogleCommonPage()
    }
    return GoogleCommonPage.instance
  }

  init(): void {
    const supportPages = [
      GooglePageType.Index,
      GooglePageType.IndexHk,
      GooglePageType.All,
      GooglePageType.Video,
      GooglePageType.Web,
      GooglePageType.News,
      GooglePageType.ShortVideo,
      GooglePageType.Books,
    ]

    if (supportPages.includes(this.pageType as GooglePageType)) {
      const config = GOOGLE_SEARCH_PAGE_SELECTORS[this.pageType as GooglePageType]

      if (!config)
        return

      this.searchCommonStyles.bindInputEvent(config)
    }
  }

  searchBoxStyles(): string {
    return `
    #searchform {
      background: var(${this.themeVarService.search.header.background}) !important;
      margin-top: 0 !important;

      /* 搜索框 */
      > div:has([role=search]) {
        justify-content: center !important;
      }
      
      .sfbg {
        background: var(${this.themeVarService.search.header.background}) !important;
      }
      
      &:not(.minidiv) {
        .sfbg {
          padding-bottom: 20px !important;
        }
      }
    }
    
    #searchform:has(${generateHideSelector(`.${AppStyleCollections.Search.class.SEARCH_HEADER_USER_CENTER}`)}) {
      grid-template-columns: max-content !important;
    }
    `
  }

  searchTabStyles(): string {
    const config: Partial<Record<GooglePageType, string>> = {
      [GooglePageType.News]: 'div[role="navigation"]:has(div[role="list"])',
    }

    const selector = config[PageHandler.getCurrentPageType() as GooglePageType] || 'div[data-st-cnt="fb"]'

    return `
    /* 搜索分类 */
    ${selector} {
      display: flex !important;
      justify-content: center !important;
      background-color: var(${this.themeVarService.search.header.background}) !important;
      
      div:has( > div[role="list"]) {
        align-items: baseline !important;
      }
      
      div[role="list"] {
        align-items: baseline !important;

        div[role="listitem"] {
          /* 悬浮 */
          &:hover {
            span {
              color: var(${this.themeVarService.tab.textHover}) !important;
            }
          }

          /* 其他页*/
          span {
            color: var(${this.themeVarService.tab.text}) !important;
          }
          
          /* 当前页 */
          [selected] span {
            color: var(${this.themeVarService.tab.textActive}) !important;
            border-bottom-color: var(${this.themeVarService.tab.textActive}) !important;
          }
        }
        
        + div {
          span {
            color: var(${this.themeVarService.tab.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.tab.textHover}) !important;
            }
          }
        }
      }
    }
    `
  }

  pageBarStyles(): string {
    const supportPages = [
      GooglePageType.All,
      GooglePageType.News,
      GooglePageType.Books,
      GooglePageType.Web,
    ]

    return !supportPages.includes(this.pageType as GooglePageType)
      ? ''
      : `
    [role="navigation"] {
      table {
        td {
          color: var(${this.themeVarService.search.default.text}) !important;
        }
      }
    }
    `
  }

  hideSearchStyles(): string {
    return `
    div:has(> .logo) {
      transform: none !important;
      margin: unset !important;
      width: unset !important;
      
      /* 搜索框 logo */
      > .logo {
        margin-left: unset !important;
      }
      
      /* 搜索框容器 */
      > div:has(textarea[role=combobox]) {
        border-radius: 26px !important;
      }
      
      /* 下拉框 */
      > div:has(div[role="presentation"] > ul[role="listbox"]) {
        display: none !important;
      }
    }
    `
  }

  getMainStyles(): string {
    const supportPages = [
      GooglePageType.All,
      GooglePageType.Video,
      GooglePageType.ShortVideo,
      GooglePageType.Web,
      GooglePageType.News,
      GooglePageType.Books,
    ]

    return !supportPages.includes(this.pageType as GooglePageType)
      ? ''
      : `
    /* 搜索历史隐藏、搜索建议隐藏 */
    &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"][${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
      form[role=search] {
        ${this.hideSearchStyles()}
      }
    }
    /* 搜索历史隐藏、搜索建议显示 */
    &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"]:not([${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}]) {
      /* 无搜索建议 */
      form[role=search][${AppStyleCollections.Search.attr.IS_SUGGESTIONS_EMPTY}="true"] {
        ${this.hideSearchStyles()}
      }
    }
    /* 搜索历史显示、搜索建议隐藏 */
    &:not([${AppStyleCollections.Search.attr.HIDE_HISTORY}])[${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
      /* 无搜索历史 */
      form[role=search][${AppStyleCollections.Search.attr.IS_HISTORY_EMPTY}="true"] {
        ${this.hideSearchStyles()}
      }
      
      /* 隐藏不当联想反馈 */
      form[role=search] {
        div:has(> .logo) {
          /* 下拉框 */
          > div:has(div[role="presentation"] > ul[role="listbox"]) {
            > div {
              > div:has(> div[role="button"]) {
                display: none !important;
              }
            }
          }
        }
      }
    }

    /* 顶部菜单*/
    ${this.searchBoxStyles()}

    /* 主样式 */
    #main #cnt {
      padding-top: 0 !important;

      ${this.searchTabStyles()}

      /* 内容分割线 */
      div[data-sd-cp] {
        div {
          border-bottom: none !important;
        }
        
        > div > div:has(> h1) {
          display: flex !important;
          min-width: auto !important;
          justify-content: center !important;
          background-color: var(${this.themeVarService.search.header.background}) !important
        }
      }

      #appbar {
        background: transparent !important;
        display: none !important;
      }
      
      #rcnt {
        justify-self: center !important;
        grid-template-columns: auto !important;
        gap: 0 !important;
        
        /* 个性化提示信息 */
        #taw > div > div {
          width: unset !important;
        }
        
        ${this.pageBarStyles()}
      }
    }
    
    /* 页脚 */
    #fbar {
      display: flex !important;
      background: transparent !important;
      justify-self: center !important;
      
      span {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      a {
        color: var(${this.themeVarService.link.default.text}) !important;
        
        span {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
        
        &:hover {
          color: var(${this.themeVarService.link.default.textHover}) !important;
          text-decoration: none !important;
          
          span {
            color: var(${this.themeVarService.link.default.textHover}) !important;
            text-decoration: none !important;
          }
        }
      }
      
      .fbar:has(#swml) {
        border-bottom: none !important;
        
        update-location {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.textHover}) !important;
            text-decoration: none !important;
          }
        }
      }
      
      #swml {
        border-left: none !important;
      }
    }
    `
  }
}
